<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="top_content">
                <h3>引流海报</h3>
                <el-button type="primary" size="large" @click="add_data">添加</el-button>
            </div>
            <div class="table">
                <Table :list="table_list" @change="change_data" />
            </div>
            <div class="pagination">
                <Pagination :list="page_list" :limit="limit" @change="page_change" />
            </div>
            <el-dialog v-model="dialogVisible" :title="infor.id ? '修改产品' : '增加产品'" width="500px">
                <div class="pop_up_box">
                    <div class="left">
                        <el-upload ref="uploadRef" class="upload-demo"
                            action="https://www.itvalue.com.cn/event/api_register/13" :auto-upload="false"
                            list-type="picture-card" :on-change="change_img" :on-remove="remove">

                            <div class="uploadImg">
                                <div class="img">
                                    <img src="@/assets/img/system/upload.png" alt="">
                                </div>
                                <div class="text">添加图片</div>
                            </div>
                        </el-upload>
                    </div>
                    <div class="right">
                        <el-input v-model="infor.name" placeholder="请输入海报名称" size="large" style="width: 200px" />
                        <el-select v-model="infor.type" placeholder="强选择 例：全部/普通/VIP" style="width: 200px" size="large"
                            class="bottom">
                            <el-option label="样式一" value="1" />
                            <el-option label="样式二" value="2" />
                        </el-select>
                    </div>
                </div>
                <div class="pop_up_box_sub">
                    <el-button type="primary" size="large" @click="submit_data">确认提交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import Nav from "@/components/public/nav.vue"
import Table from "@/components/system/table.vue"
import Pagination from "@/components/home/task/pagination.vue"
import { get_posters_list, change_posters_list, update_img } from "@/request/api/system.ts"
import { reload } from "@/utils/flushed"
import {
    onMounted,
    reactive,
    ref
} from 'vue'

const limit = ref(10)
let table_list = ref("")
let page_list = ref("")
let params_init = {
    style: 2,
    limit: limit.value,
    page: 1
}
let file: any = ''
const add_data = () => {
    dialogVisible.value = true
}
let dialogVisible = ref(false)
const infor = reactive({
    id: "",
    name: "",
    type: ""
})
const submit_data = async () => {
    if (!infor.name) {
        ElMessage.error("请输入海报名称")
    } else if (!infor.type) {
        ElMessage.error("请选择类型")
    } else if (!file) {
        ElMessage.error("请选择图片")
    }
    let fd = new FormData()
    fd.append("file", file)
    let data1 = await update_img(fd)
    console.log(data1, "data1", import.meta.env.VITE_BASE_URL);
    let params = {
        image_url: import.meta.env.VITE_BASE_URL + "/" + data1.data.file,
        type: infor.type,
        style: 2,
        title: infor.name,
        id: ''
    }
    if (infor.id) {
        params.id = infor.id
    }
    let data = await change_posters_list(params)
    console.log(data, "data");
    if (data.code == 200) {
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        reload()
        // location.reload()
    } else {
        ElMessage.error(data.message)
    }
}
const get_list = async () => {
    let { data } = await get_posters_list(params_init)
    table_list.value = data.list
    page_list.value = data.pageData
    console.log(data, "dataget_information_listget_information_list");
}
const change_img = (uploadFile: any) => {
    console.log(uploadFile)
    file = uploadFile.raw
}
const remove = () => {
    console.log("离开了");
    file = ''
    infor.id = ""
}
// 页数发生改变
const page_change = (val: any) => {
    params_init.page = val
    get_list()
}
// 修改
const change_data = (row: any) => {
    console.log(row, "row");

    infor.id = row.id
    infor.name = row.title
    infor.type = row.type + ""

    dialogVisible.value = true
}
onMounted(() => {
    get_list()
})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;


    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .top_content {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
            align-items: center;

            h3 {
               margin: 10px 0 20px;
                   color: #1f2f3d;
                   font-weight: 400;
                   font-size: 22px;
            }
        }

        .table {
            margin-top: 40px;
        }

        .pagination {
            margin: 20px 0;
            display: flex;
            justify-content: right;
        }
    }
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader-icon {
    border: 1px dashed #999;
}

.pop_up_box {
    display: flex;
    align-items: center;

    .left {}

    .right {
        padding-left: 20px;
        flex: 1;

        .bottom {
            margin-top: 20px;
        }
    }
}

.pop_up_box_sub {
    text-align: center;
    margin-top: 20px;
}


:deep(.upload-demo) {
    width: 148px;
    ;
    height: 148px;
    ;
    overflow: hidden;

}

:deep(.el-upload) {
    height: 148px;
    ;
}

:deep(.el-upload--picture-card) {
    background-color: #F8F8F8;
    border: none;
}

.uploadImg {
    height: 148px;

    .img {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    img {
        width: 20px;
        // height: 39px;
    }

    .text {
        @include font(#333333, 12, 20);
        margin-top: 20px;
    }
}

:deep(.el-upload-list__item-preview) {
    display: none !important;
}

:deep(.el-upload-list__item-delete) {
    margin-left: 0 !important;
}
</style>